<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
  <link rel="stylesheet" href="/style/default/index.css">
  <style>
    .el-header {
      background-color: #B3C0D1;
      color: #333;
      line-height: 60px;
    }

    .el-aside {
      color: #333;
    }

    html,
    body,
    #app,
    .el-container {
      padding: 0px;
      margin: 0px;
      height: 100%;
    }

    .my-layout-admin {
      position: fixed;
      top: 110px;
      left: 220px;
      right: 0px;
      bottom: 0px;
    }

    .mydmin-iframe {
      position: absolute;
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
    }

    /* 菜单后面小三角的图标颜色 */
    .el-submenu__title i {
      color: #eee;
    }
  </style>
</head>

<body>
<div id="app">

  <!--修改密码dialog-->
  <el-dialog title="修改密码" :visible.sync="dialogRepasswordVisible" width="50%">
    <div style="height:160px;overflow-y:auto;">
      <el-form ref="repasswordForm" :model="repasswordData" :rules="rules"
               label-width="120px" size="mini" style="margin-right: 30px;">
        <el-col :span="24">
          <el-form-item label="原密码" prop="oldPassword">
            <el-input show-password v-model="repasswordData.oldPassword"></el-input>
          </el-form-item>
          <el-form-item label="新密码" prop="newPassword1">
            <el-input show-password v-model="repasswordData.newPassword1"></el-input>
          </el-form-item>
          <el-form-item label="重复新密码" prop="newPassword2">
            <el-input show-password v-model="repasswordData.newPassword2" @keyup.enter.native="submitRepassword"></el-input>
          </el-form-item>
        </el-col>
      </el-form>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogRepasswordVisible = false">取 消</el-button>
      <el-button @click="submitRepassword" type="primary">确 定
      </el-button>
    </div>
  </el-dialog>


  <el-container style="height: 100%; border: 0px solid #eee;">
    <el-aside width="220px" style="background-color: #545c64; font-weight: 900;">
      <div style="width:100%;height:60px;text-align: center;background-color:#545c64;color:#eee;">
          <span style="margin:20px 0px 0px 0px;">
            超级管理系统
          </span>
      </div>
      <el-menu v-loading="menuLoading" :default-active="menuValue" unique-opened class="el-menu-vertical-demo"
               @select="handleSelect" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b"
               style="border: 0px;">

        <el-submenu :index="index.toString()" v-for="(submenu, index) in menuData">
          <template slot="title">
            <i :class="submenu.icon" style="color:#eee;font-size: 18px;"></i>
            <span>{{submenu.name}}</span>
          </template>
          <el-menu-item :index="index + '-' + number" v-for="(item, number) in submenu.children">{{item.name}}
          </el-menu-item>
        </el-submenu>

      </el-menu>
    </el-aside>

    <el-container>
      <el-header style="text-align: right; background-color: #545c64; color: #eee;">
        <el-dropdown style="color:#eee;font-size:14px;" trigger="click" @command="handleCommand">
          <span class="el-dropdown-link">
            <span class="el-icon-user"> {{memberData.name}} </span><i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item icon="el-icon-plus">黄金糕</el-dropdown-item>
            <el-dropdown-item icon="el-icon-circle-plus">狮子头</el-dropdown-item>
            <el-dropdown-item icon="el-icon-circle-plus-outline">螺蛳粉</el-dropdown-item>
            <el-dropdown-item command="repassword" icon="el-icon-setting">修改密码</el-dropdown-item>
            <el-dropdown-item command="logout" icon="el-icon-switch-button">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <el-button type="text" size="small" @click="logout" style="margin-left:20px;color:#eee;font-size:14px;"
                   class="el-icon-switch-button"> 退出登录
        </el-button>
      </el-header>

      <el-main style="padding: 3px;">
        <el-tabs v-model="tabsValue" type="card" @tab-click="selectTab" @tab-remove="removeTab">
          <el-tab-pane :key="item.name" v-for="(item, index) in tabsData" :label="item.title" :name="item.name"
                       :closable="item.close">

            <div class="my-layout-admin">
              <iframe :src="item.content" frameborder="0" class="mydmin-iframe"></iframe>
            </div>

          </el-tab-pane>
        </el-tabs>
      </el-main>
    </el-container>
  </el-container>
</div>
</body>
<script src="https://cdn.staticfile.org/vue/2.6.10/vue.min.js"></script>
<script src="https://cdn.staticfile.org/element-ui/2.11.1/index.js"></script>
<script src="https://cdn.staticfile.org/axios/0.19.0/axios.min.js"></script>

<script>
  var vm = new Vue({
    el: '#app',
    data: function () {
      var validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'));
        } else if (value !== this.repasswordData.newPassword1) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
      };
      return {
        tabsValue: 'home',  // tab默认打开的页面

        // tab 数据
        tabsData: [{
          title: '首页',
          name: 'home',
          close: false,
          content: 'https://www.layui.com/admin/std/dist/views/home/homepage1.html'
        }],

        menuValue: '0',     // 菜单项选中项
        menuLoading: true,  // 是否显示菜单数据读取中画面
        menuData: [],       // 菜单数据

        memberData: {},    // 用户的登录信息

        dialogRepasswordVisible: false, // 是否显示重置密码对话框
        repasswordData: {},              // 重置密码表单数据

        // 表单中的数据验证规则
        rules: {
          oldPassword: [
            {required: true, trigger: 'blur', message: '该值不能为空'},
            {min: 6, max: 20, trigger: 'blur', message: '长度在 6 到 20 个字符'}
          ],
          newPassword1: [
            {required: true, trigger: 'blur', message: '该值不能为空'},
            {min: 6, max: 20, trigger: 'blur', message: '长度在 6 到 20 个字符'}
          ],
          newPassword2: [
            {required: true, trigger: 'blur', validator: validatePass}
          ]
        },

      }
    },
    methods: {
      // 点击菜单项调用
      handleSelect(index, indexPath) {
        let v = index.split('-');
        let a = parseInt(v[0]);
        let b = parseInt(v[1]);
        let tab = this.menuData[a].children[b];
        if (tab) {
          // 根据 index 查找tab是否存在对应的标签，如果已经存在则直接打开。否则添加
          let flag = false;
          for (let i = 0; i < this.tabsData.length; i++) {
            let obj = this.tabsData[i];
            if (obj.name == index) {
              flag = true;
            }
          }

          if (flag) {
            this.tabsValue = index;
          } else {
            this.tabsData.push({
              title: tab.name,
              name: index,
              close: true,
              content: tab.uri_path,
            })
            this.tabsValue = index;
          }

        }
      },

      // 选择 tab 项调用
      selectTab(obj) {
        this.menuValue = obj.name;
      },

      // 删除 tab 项
      removeTab(targetName) {
        let tabs = this.tabsData;
        let activeName = this.tabsValue;
        if (activeName === targetName) {
          tabs.forEach((tab, index) => {
            if (tab.name === targetName) {
              let nextTab = tabs[index + 1] || tabs[index - 1];
              if (nextTab) {
                activeName = nextTab.name;
              }
            }
          });
        }

        this.tabsValue = activeName;
        this.tabsData = tabs.filter(tab => tab.name !== targetName);

      },

      // 下拉菜单事件
      handleCommand(command) {
        if(command === 'logout'){
          this.logout();
        } else if(command === 'repassword'){
          this.repasswordData = {},
          this.dialogRepasswordVisible = true;
        }

      },

      // 退出登录
      logout() {

        axios.get('/guest/member/logout.bu')
          .then(function (response) {
            if (response.data.code > 0) {
              window.location.href = "login.html";
            } else {
              vm.$message.error(response.data.msg);
            }
          })
          .catch(function (error) {
            vm.$message.error('获取菜单数据失败！' + error);
          })
      },

      // 提交重置密码信息
      submitRepassword() {
        this.$refs.repasswordForm.validate((valid) => {
          if (valid) {
            axios.post('/admin/sys/edit_password.bu', this.repasswordData)
              .then(function (response) {
                if (response.data.code > 0) {
                  vm.$message.success(response.data.msg);
                  vm.dialogRepasswordVisible = false;
                } else {
                  vm.$message.error(response.data.msg);
                }
              })
              .catch(function (error) {
                vm.$message.error('错误：' + error);
              })
          } else {
            vm.$message.error('错误：提交失败，请检查表单数据是否符合要求！');
            return false;
          }
        });
      }
    },
  })

  // 自动执行，读取菜单数据等
  new function () {

    // 用户信息
    axios.get('/admin/sys/get_member_data.bu')
      .then(function (response) {
        if (response.data.code > 0) {
          vm.memberData = response.data.bundle;
        } else {
          vm.$message.error(response.data.msg);
        }
      })
      .catch(function (error) {
        vm.$message.error('获取登录信息失败！' + error);
      })

    // 读取菜单数据
    axios.get('/admin/sys/get_sys_menu.bu')
      .then(function (response) {
        console.log(response);
        if (response.data.code > 0) {
          console.log(response);
          vm.menuData = response.data.bundle;
          vm.menuLoading = false;
        } else if (response.data.code == 0) {
          vm.$message.error("没有数据");
        } else {
          vm.$message.error(response.data.msg);
        }
      })
      .catch(function (error) {
        vm.$message.error('获取菜单数据失败！' + error);
      })

    // 读取参数信息至缓存
    axios.get('/admin/sys/get_option_params.bu')
      .then(function (response) {
        if (response.data.code > 0) {
          console.log(response);
          sessionStorage.setItem('optionData', JSON.stringify(response.data.bundle));
        } else if (response.data.code == 0) {
          vm.$message.error("没有数据");
        } else {
          vm.$message.error(response.data.msg);
        }
      })
      .catch(function (error) {
        vm.$message.error('获取菜单数据失败！' + error);
      })
  };

</script>

</html>